<!DOCTYPE html>  
<html lang="en" dir="ltr">  
<head>  
    <meta charset="utf-8">  
    <title>健康数据可视化</title>  
    <link rel="shortcut icon" href="{{ url_for('static', filename='diabetes-favicon.ico') }}">  
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">  
    <script src="https://kit.fontawesome.com/5f3f547070.js" crossorigin="anonymous"></script>  
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">  
</head>  

<body>  
    <!-- Website Title -->  
    <div class="container">  
        <h2 class='container-heading'><span class="heading_font">健康数据可视化</span></h2>  
        <div class='description'>  
            <p>使用Flask构建,本地部署。</p>  
        </div>  
    </div>  

    <!-- Text Area -->  
    <div class="ml-container">  
        <form action="{{url_for('predict')}}" method="POST">  
            <input class="form-input" type="text" name="patient_id" placeholder="患者ID eg. 12345678" pattern="^\d{8}$" required title="请输入八位数整数"><br>
            <input class="form-input" type="text" name="pregnancies" placeholder="怀孕次数 eg. 0" pattern="\d+" required title="请输入非负整数"><br>  
            <input class="form-input" type="text" name="glucose" placeholder="血糖 (mg/dL) eg. 80" pattern="\d+(\.\d+)?" required title="请输入非负数"><br>   
            <input class="form-input" type="text" name="bloodpressure" placeholder="血压 (mmHg) eg. 80" pattern="\d++(\.\d+)?" required title="请输入非负数"><br>   
            <input class="form-input" type="text" name="skinthickness" placeholder="皮肤厚度 (mm) eg. 20" pattern="\d+(\.\d+)?" required title="请输入非负数"><br>  
            <input class="form-input" type="text" name="insulin" placeholder="胰岛素水平 (IU/mL) eg. 350" pattern="\d+(\.\d+)?" required title="请输入非负数"><br>  
            <input class="form-input" type="text" name="bmi" placeholder="BMI (kg/m²) eg. 23.1" pattern="\d+(\.\d+)?" required title="请输入非负数"><br>  
            <input class="form-input" type="text" name="dpf" placeholder="糖尿病谱系功能 eg. 0.52" pattern="\d+(\.\d+)?" required title="请输入非负数"><br>  
            <input class="form-input" type="text" name="age" placeholder="年龄 (years) eg. 34" pattern="\b(?:[0-9]|[1-9][0-9]|1[0-4][0-9]|150)\b" required title="请输入0到150之间的整数"><br>  

            <input type="submit" class="my-cta-button" value="预测并记录">  
        </form>  
        <button class="my-cta-button" action="{{url_for('history')}}" onclick="viewHistory()">查看历史记录</button>  
    </div>  

    <!-- Footer -->  
    <div class='footer'>  
        <div class="contact">  
            <a target="_blank" href="https://github.com/anujvyas/Diabetes-Prediction-Deployment"><i class="fab fa-github fa-lg contact-icon"></i></a>  
            <a target="_blank" href="https://www.linkedin.com/in/anujkvyas"><i class="fab fa-linkedin fa-lg contact-icon"></i></a>  
        </div>  
        <p class='footer-description'>联系我们 ❤️ 3188577474@qq.com </p>  
    </div>  

    <script>  

    function viewHistory() {  
        // 直接跳转到 /history 路由  
        window.location.href = "/history";  
    } 
    </script>  
</body>  
</html>